<template>
  <q-scroll-area class="account-setting column">
    <div class="title">{{ $t('settings.myAccount.title') }}</div>
    <div class="info-container q-my-md">
      <div
        class="my-avatar-container q-px-md row items-center justity-around"
        :style="`background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(${currentUser.bannerString});`"
      >
        <q-avatar size="108px" class="avatar q-ma-md">
          <img :src="currentUser.avatar" />
        </q-avatar>
        <div class="column col">
          <div class="username text-no-wrap">{{ currentUser.name }}</div>
          <div class="sub-info q-mb-sm">
            {{
              $t('settings.myAccount.memberSince', [
                currentUser.memberSinceString,
              ])
            }}
          </div>
        </div>
        <q-btn
          dense
          color="accent"
          :label="$t('settings.myAccount.viewProfile')"
          no-caps
          rounded
          @click="gotoProfile"
          style="width: 128px"
        />
      </div>
      <div class="info column q-pa-lg q-gutter-y-md">
        <div class="row justify-between items-center">
          <div>
            <div class="key">{{ $t('settings.myAccount.username') }}</div>
            <div class="value">{{ currentUser.name }}</div>
          </div>
          <q-btn
            rounded
            color="sub"
            :label="$t('settings.myAccount.editBtn')"
            no-caps
            @click="usernameDialog = true"
          />
        </div>
        <div class="row justify-between items-center">
          <div>
            <div class="key">{{ $t('settings.myAccount.email') }}</div>
            <div class="value">{{ currentUser.email }}</div>
          </div>
          <q-btn
            rounded
            color="sub"
            :label="$t('settings.myAccount.editBtn')"
            no-caps
            @click="emailDialog = true"
          />
        </div>
        <div class="row justify-between items-center">
          <div>
            <div class="key">{{ $t('settings.myAccount.birthday') }}</div>
            <div class="value">{{ currentUser.birthdayString }}</div>
          </div>
          <q-btn
            rounded
            color="sub"
            :label="$t('settings.myAccount.editBtn')"
            no-caps
            @click="birthdayDialog = true"
          />
        </div>
        <div class="row justify-between items-center">
          <div>
            <div class="key">{{ $t('settings.myAccount.password') }}</div>
            <div class="value">************</div>
          </div>
          <q-btn
            rounded
            color="sub"
            :label="$t('settings.myAccount.editBtn')"
            no-caps
            @click="passwordDialog = true"
          />
        </div>
      </div>
    </div>
    <div class="social-container">
      <div class="q-my-md">
        <div class="label">{{ $t('settings.myAccount.socialLinkTitle') }}</div>
        <div class="sub-title">
          {{ $t('settings.myAccount.socialLinkSubtitle') }}
        </div>
      </div>

      <div class="row q-gutter-x-md q-my-md">
        <q-select
          dense
          v-model="selectedSocialOption"
          :options="socialOptions"
          standout
          color="sub"
          class
        />
        <q-input
          dense
          class="col"
          v-model="socialLinkString"
          standout
          color="white"
        />
        <q-btn
          dense
          color="accent"
          :label="$t('settings.myAccount.addBtn')"
          no-caps
          padding="0px 20px"
          @click="addSocialLlink"
        />
      </div>
      <div class="column">
        <draggable
          v-model="socials"
          handle=".handle"
          item-key="order"
          @start="onDragStart"
          @end="onDragEnd"
          v-bind="dragOptions()"
          tag="transition-group"
          :component-data="{
            tag: 'div',
            type: 'transition-group',
            name: !drag ? 'flip' : null,
          }"
        >
          <template #item="{ element }">
            <social-link-item
              class="q-mb-sm"
              :link="element"
              @edit="onSocialItemEdit"
            />
          </template>
        </draggable>
      </div>
    </div>
    <q-separator class="q-my-md" color="black" />
    <div class="account-removal">
      <div class="q-my-md">
        <div class="label">
          {{ $t('settings.myAccount.accountRemoveTitle') }}
        </div>
        <div class="sub-title">
          {{ $t('settings.myAccount.accountRemoveSubtitle') }}
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <q-btn
          :label="$t('settings.myAccount.disableAccountBtn')"
          no-caps
          color="negative"
        />
        <q-btn
          :label="$t('settings.myAccount.deleteAccountBtn')"
          no-caps
          color="negative"
          outline
        />
      </div>
    </div>
    <password-dialog v-model="passwordDialog" />
    <email-dialog v-model="emailDialog" />
    <username-dialog v-model="usernameDialog" />
    <birthday-dialog v-model="birthdayDialog" />
  </q-scroll-area>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import draggable from 'vuedraggable';
import Me from 'src/models/Me';
import SocialLink, {
  SocialOptionConfig,
  SocialOptions,
} from 'src/models/SocialLink';
import Moment from 'moment';
import SocialLinkItem from './SocialLinkItem.vue';
import PasswordDialog from './dialogs/PasswordDialog.vue';
import EmailDialog from './dialogs/EmailDialog.vue';
import UsernameDialog from './dialogs/UsernameDialog.vue';
import BirthdayDialog from './dialogs/BirthdayDialog.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'stores/global-store';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const router = useRouter();
const $q = useQuasar();
const currentUser = computed(() => userStore.currentUser as Me);
const socials = ref<SocialLink[]>([]);
const mySocialLinks = computed<SocialLink[]>(() => userStore.socialLinks);
watch(mySocialLinks, () => {
  socials.value = mySocialLinks.value.map((item) => item);
});

const calcOrder = () => {
  if (mySocialLinks.value.length <= 0) {
    return 0;
  }
  const orders = mySocialLinks.value.map((link) => link.order);
  return Math.max(...orders) + 1;
};
const drag = ref(false);
const dragOptions = () => {
  return {
    animation: 200,
    group: 'description',
    disable: false,
    ghostClass: 'ghost',
  };
};
const socialOptions = ref<SocialOptionConfig[]>([]);
for (let option of SocialOptions.values()) {
  socialOptions.value.push(option);
}
const selectedSocialOption = ref<any>(null);
const socialLinkString = ref('');
const username = ref('');
const email = ref('');
const password = ref('******');
const birthday = ref('');
username.value = currentUser.value.name;
email.value = currentUser.value.email;
birthday.value = Moment(currentUser.value.birthday).format('YYYY/MM/DD');
const gotoProfile = () => {
  globalStore.showSettingDialog = false;
  router.push({ name: 'ProfileHome' });
};
const addSocialLlink = async () => {
  if (selectedSocialOption.value && socialLinkString.value !== '') {
    const param = {
      type: selectedSocialOption.value.type,
      link: socialLinkString.value,
      order: calcOrder(),
      visible: true,
    };
    await userStore.addSocialLink(param);
  } else {
    $q.dialog({
      title: 'Error',
      message: 'Please select a social',
    });
  }
};
const onSocialItemEdit = (link: SocialLink) => {
  console.log(link);
};
const onDragStart = () => {
  drag.value = true;
};
const onDragEnd = (event: any) => {
  drag.value = false;
  // TODO upload to server
};
const passwordDialog = ref(false);
const emailDialog = ref(false);
const birthdayDialog = ref(false);
const usernameDialog = ref(false);

onMounted(async () => {
  await userStore.getMySocialLinks();
  socials.value = mySocialLinks.value.map((item) => item);
});
</script>
<style lang="sass" scoped>

.ghost
  opacity: 0.5
  background-color: $sub !important
.flip-move,
.flip-enter-active,
.flip-leave-active
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1)
.link-item
  width: 100%
  height: 54px
  background-color: #1C1C1C
  a
    font-size: 14px
    color: $accent
    text-decoration: none
.account-setting
  width: 100%
  height: 100%
$info-box-width: 625px
.info-container
  background-color: #1c1c1c
  border-radius: 14px
  width: $info-box-width
  .my-avatar-container
    border-radius: 14px
    width: 100%
    height: 140px
    position: relative
    background-size: cover
    background-position: center
    .avatar
      z-index: 1
      outline: 4px solid #1c1c1c
      box-shadow: 0px 0px 18px rgba(0,0,0,0.3)
    .username
      z-index: 1
      font-size: 24px
    .sub-info
      z-index: 1
      font-size: 12px
      color: $sub
  .info
    width: 100%
    .key
      color: $sub
.social-container
  width: $info-box-width
  .label
    font-size: 14px
  .sub-title
    font-size: 14px
    color: $sub
.account-removal
  .label
    font-size: 14px
  .sub-title
    color: $sub
    font-size: 14px
</style>
